<template>
  <div class="customer-group">
    <div class="common-banner" :style='{backgroundImage: `url(${this.banner})`}'>
    </div>
    <div class="help-customer">
      <div class="help-title">
        部分合作客户
      </div>
      <div class="help-content">
        覆盖领域家居、金融、游戏、电商、教育等全行业
      </div>
      <div class="slide-group">
        <i class='glyphicon glyphicon-toleft' @click='this.turnLeft'></i>
        <div class="slides">
          <div :class='this.mytransition ? "slides-contain istransition" : "slides-contain "' :style='{width: this.slideList.length * 3 + "rem", left: this.nowLeft * 3 + "rem"}'>
            <img :class='nowBig === (index + 1) ? "now-big" : ""' :style='{transition: "all ease " + istransition ? "0.3s" : "0s"}' :src='item.image' v-for='(item, index) in slideList'/>
          </div>
        </div>
        <i class='glyphicon glyphicon-toright' @click='this.turnRight'></i>
      </div>
    </div>
    <div class="customer-list">
      <div class="customer-list--title">
        部分客户案例
      </div>
      <div class="customer-lsit--body">
        <div class="customer-one" v-for='(item, index) in customerList' :key='index'>
          <router-link :to='item.info'>
            <img :src='item.image' alt="" />
          </router-link>
          <div class="customer-desc">
            {{item.desc}}
          </div>
          <div class="customer-numberlist">
            <div class="customer-number" v-for='(i, x) in item.number' :key='x'>
              <div class="customer-number--name">
                {{i.name}}
              </div>
              <div class="customer-number--value text-center">
                {{i.value}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center" v-if='this.showBtn'>
      <i class="glyphicon glyphicon-addmore" @click='this.addMore'></i>
    </div>
  </div>
</template>

<script>
import { getBanner, getCustomerList } from '@/api/ajax'

export default {
  data () {
    return {
      banner: '',
      customerList: [],
      showBtn: true,
      slideList: [],
      nowBig: 3, // 当前变大
      nowIndex: 1, // 当前序号
      nowLeft: 0,
      mytransition: true // 是否过度
    }
  },
  mounted () {
    getBanner({type: 3}).then(res => {
      this.banner = res.data.list[0].image
    })
    getCustomerList({type: 2, page: 1, limit: 4}).then(res => {
      this.customerList = res.data.list
    })
    getCustomerList({type: 1}).then(res => {
      this.slideList = [...res.data.list, ...res.data.list]
    })
  },
  created () {
  },
  methods: {
    addMore () {
      getCustomerList({type: 2, page: 1, limit: 6}).then(res => {
        this.customerList = res.data.list
        this.showBtn = false
      })
    },
    turnLeft () {
      if (this.nowIndex - 1 <= 0) {
        let that = this
        this.$set(this, 'mytransition', false)
        this.$nextTick(function () {
          that.$set(that, 'nowIndex', that.slideList.length / 2)
          that.$set(that, 'nowBig', that.slideList.length / 2 + 2)
          that.$set(that, 'nowLeft', -(that.slideList.length / 2))
          that.$nextTick(function(){
            that.$set(that, 'mytransition', true)
            that.$nextTick(function(){
              that.$set(that, 'nowLeft', -(that.slideList.length / 2 - 1))
            })
          })
        })
      } else {
        this.nowBig = this.nowBig - 1
        this.nowIndex = this.nowIndex - 1
        this.nowLeft = this.nowLeft + 1
      }
    },
    turnRight () {
      if (this.nowIndex + 5 > this.slideList.length) {
        this.mytransition = false
        this.nowIndex = this.slideList.length / 2 - 3,
        this.nowBig = this.slideList.length / 2 - 1,
        this.nowLeft = -(this.slideList.length / 2 - 5)
        this.mytransition = true
        this.nowLeft = -(this.slideList.length / 2 - 4)
      } else {
        this.nowBig = this.nowBig + 1
        this.nowIndex = this.nowIndex + 1
        this.nowLeft = this.nowLeft - 1
      }
    }
  }
}
</script>

<style lang="less">
.customer-group{
  .help-customer{
    padding-top: 1rem;
    color: #333;
    padding-bottom: 1.33rem;
    .help-title{
      text-align: center;
      font-size: .93rem;
      margin-bottom: 1rem;
    }
    .help-content{
      font-size: .8rem;
      text-align: center;
      margin-bottom: 1rem;
    
    }
    .slide-group{
      display: flex;
      padding: 0 1.33rem;
      justify-content: space-between;
      i{
        padding-top: 1rem;
      }
      .slides{
        width: 15rem;
        height: 3rem;
        overflow: hidden;
      }
      .slides-contain{
        position: relative;
        left: 0;
        height: 3rem;
        img{
          width: 2rem;
          height: 2rem;
          margin: 0.5rem;
        }
        &.istransition{
          transition: left ease 0.3s;
        }
        img.now-big{
          width: 3rem;
          height: 3rem;
          margin: 0;
        }
      }
    }
  }
  .customer-list{
    .customer-list--title{
      font-size: .8rem;
      color: #333;
      margin-bottom: 1rem;
      text-align: center;
    }
    .customer-lsit--body{
      padding: 0 1.33rem;
      overflow: hidden;
      .customer-one{
        width: 10.87rem;
        float: left;
        margin-bottom: .6rem;
        margin-left: .6rem;
        &:nth-child(2n + 1) {
          margin-left: 0;
        }
        img{
          height: 5.93rem;
          display: block;
        }
        .customer-desc{
          padding: .67rem .27rem .23rem .27rem;
          line-height: 1.33rem;
          height: 2.67rem;
          font-size: .8rem;
          color: #666;
          border: 1px solid #F5F5F5;
          border-top: none;
          border-bottom: none;
        }
        .customer-numberlist{
          display: flex;
          padding: 0 .27rem;
          border: 1px solid #F5F5F5;
          border-top: none;
          padding-bottom: .5rem;
          justify-content: space-between;
          .customer-number{
            color: #326EAA;
            .customer-number--name{
              font-size: .67rem;
              margin-bottom: .33rem;
            }
            .customer-number--value{
              font-size: .47rem;
            }
          }
        }
      }
    }
  }
}
</style>
